<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
  addButtonText:{
    type: String,
    default:"新增"
  }
})
const components = ref([
  {}
])

function addComponent() {
  components.value.push({})
}
</script>

<template>
  <div class="component-adder-layer">
    <div class="slot-area" v-for="(component,index) in components" :key="index">
      <slot></slot>
    </div>
    <van-button class="btn-adder" @click="addComponent" block round>{{props.addButtonText}}</van-button>
  </div>
</template>

<style scoped>
.btn-adder{
  margin-top: 0.5rem;
}

.component-adder-layer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .slot-area{
    width: 100%;
  }
}
</style>
